<template>
    <div class="zoangliang">
        <ModalTitle title="执法事件总量动态变化分析">
            <TimeTab @timeReturnFn="timeReturnFn" />
        </ModalTitle>
        <Proportion class="proportion-box" @timeReturnFn="proportionFn" />
        <div class="zoangliang-chart" id="zoangliang-chart" ref="zoangliangChart"></div>
    </div>
</template>

<script>
import { ZongHeZhiFaZhuanTi } from '@/api/zhangzi'
import ModalTitle from '@/components/ModalTitle/Index.vue'
import TimeTab from '@/components/TimeTab/Index.vue'
import Proportion from '@/components/Proportion/Index.vue'

export default {
    components: {
        ModalTitle,
        TimeTab,
        Proportion
    },
    data() {
        return {
            timeType: 0,
            types: 1
        }
    },

    mounted() {
        this.zoangliangDataFn()
    },

    methods: {
        // 改变时间
        timeReturnFn(time) {
            this.timeType = time.value
            if (this.types == 1) {
                this.zoangliangDataFn('change')
            } else {
                this.TotalDynamicChange('change')
            }
        },
        // 切换类型
        proportionFn(e) {
            this.types = e.value
            if (e.value == 1) {
                this.zoangliangDataFn('init')
            } else {
                this.TotalDynamicChange('init')
            }
        },
        // 同比
        async zoangliangDataFn(T = 'init') {
            const { success, data, message } = await ZongHeZhiFaZhuanTi.totalDynamicChange({
                dateType: this.timeType
            })
            if (success) {
                let xData = data.map(e => e.time)
                let yData = data.map(e => e.sum)
                if (T == 'init') {
                    this.zoangliangChartFn(xData, yData, 'RGBA(0, 154, 215, 1)', 'RGBA(0, 154, 215, .1)')
                } else {
                    var chart = echarts.getInstanceByDom(this.$refs.zoangliangChart)
                    var option = chart.getOption()
                    option.xAxis[0].data = xData
                    option.series[0].data = yData
                    option.series[0].areaStyle.color.colorStops[0].color = 'RGBA(0, 154, 215, 1)'
                    option.series[0].areaStyle.color.colorStops[1].color = 'RGBA(0, 154, 215, .1)'
                    chart.setOption(option)
                }
            } else {
                this.$message.error(message)
            }
        },
        // 环比
        async TotalDynamicChange(T = 'init') {
            const { success, data, message } = await ZongHeZhiFaZhuanTi.TotalDynamicChange2({
                dateType: this.timeType
            })
            if (success) {
                let xData = data.map(e => e.time)
                let yData = data.map(e => e.sum)
                if (T == 'init') {
                    this.zoangliangChartFn(xData, yData, 'RGBA(0, 233, 186, 1)', 'RGBA(0, 233, 186, .1)')
                } else {
                    var chart = echarts.getInstanceByDom(this.$refs.zoangliangChart)
                    var option = chart.getOption()
                    option.xAxis[0].data = xData
                    option.series[0].data = yData
                    option.series[0].areaStyle.color.colorStops[0].color = 'RGBA(0, 233, 186, 1)'
                    option.series[0].areaStyle.color.colorStops[1].color = 'RGBA(0, 233, 186, .1)'
                    chart.setOption(option)
                }
            } else {
                this.$message.error(message)
            }
        },

        zoangliangChartFn(x, y, colorOne, colorTwo) {
            let xData = x;  //x数据
            let colorList = ['#A1E3FD', '#005BC7',]
            let firstIndustry = y;
            let charts = echarts.init(this.$refs.zoangliangChart)
            let options = {
                color: colorList,
                backgroundColor: "",
                grid: {
                    top: '15%',
                    left: '0',
                    right: '0',
                    bottom: '0',
                    containLabel: true,
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
                xAxis: [
                    {
                        type: 'category',
                        axisTick: {
                            show: false,
                        },
                        interval: 1,
                        axisLabel: {
                            color: 'rgba(36, 173, 254, 1)',
                            fontSize: "1.4rem"
                        },
                        axisLine: {
                            show: true
                        },
                        data: xData,
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '数量',
                        axisLabel: {
                            formatter: '{value} '
                        },
                        axisLabel: {
                            textStyle: {
                                //坐标轴颜色
                                color: '#5FD7FC',
                                fontSize: "1rem"
                            }
                        },
                        axisLine: {
                            //y轴线的颜色以及宽度
                            show: true,
                        },
                        //坐标轴线样式
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: 'solid', //solid实线;dashed虚线
                                color: 'rgba(36, 173, 254, 0.2)'
                            }
                        },
                    },
                ],
                series: [
                    {
                        name: "上报",
                        data: firstIndustry,
                        type: 'line',
                        smooth: true, //true曲线; false折线
                        symbol: 'none',
                        itemStyle: {
                            normal: {
                                lineStyle: {
                                    color: colorList[0], //改变折线颜色
                                    type: 'solid'
                                }
                            }
                        },
                        areaStyle: {
                            //折线图颜色半透明
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: colorOne // 0% 处的颜色
                                }, {
                                    offset: 1, color: colorTwo // 100% 处的颜色
                                }],
                                global: false // 缺省为 false
                            }
                        }
                    },
                ]
            }
            options && charts.setOption(options)
        },
    },
}
</script>

<style lang="less" scoped>
.zoangliang {
    width: 100%;
    height: 34.5rem;
    margin: 2rem 0  1.8rem;
    position: relative;

    .proportion-box {
        justify-content: flex-end;
        margin-top: 1rem;
    }

    .zoangliang-chart {
        width: 100%;
        height: 22rem;
    }
}
</style>